<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useAdminHooks } from "@/views/common/admin";
import { useUserStore } from "@/store/modules/user";
const { adminList, isSuperAdmin, currentUsername } = useAdminHooks();
const userStore = useUserStore();
import { count } from "@/api/drafts_config";

import { classifyFormat } from "@/views/formats";
const { classifyMenuOptions: typesMenuOptions } = classifyFormat("classify");

const { classifyMenuOptions: businessMenuOptions } = classifyFormat("business");

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: ""
  })
});

const ruleFormRef = ref();

const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

async function estimatedQuantity() {
  const { data } = await count({
    type_classify_id: newFormInline.value.type_classify_id,
    business_classify_id: newFormInline.value.business_classify_id,
    start_id: newFormInline.value.start_id,
    number: newFormInline.value.number
  });
  newFormInline.value.estimate_number = data;
}

onMounted(() => {
  estimatedQuantity();
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <el-form-item label="重写标题" prop="keep_title">
      <el-radio-group v-model="newFormInline.keep_title">
        <el-radio :label="1">智能重写</el-radio>
        <el-radio :label="2">不重写</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="重写内容" prop="keep_content">
      <el-radio-group v-model="newFormInline.keep_content">
        <el-radio :label="1">智能重写</el-radio>
        <el-radio :label="2">不重写</el-radio>
      </el-radio-group>
    </el-form-item>

    <re-col>
      <el-form-item label="类型分类">
        <el-cascader
          v-model="newFormInline.type_classify_id"
          class="w-full"
          :options="typesMenuOptions"
          :props="{
            value: 'id',
            label: 'title',
            emitPath: false,
            checkStrictly: true
          }"
          clearable
          filterable
          placeholder="请选择类型分类"
          @change="estimatedQuantity"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </re-col>

    <re-col>
      <el-form-item label="业务分类">
        <el-cascader
          v-model="newFormInline.business_classify_id"
          class="w-full"
          :options="businessMenuOptions"
          :props="{
            value: 'id',
            label: 'title',
            emitPath: false,
            checkStrictly: true
          }"
          clearable
          filterable
          placeholder="请选择业务分类"
          @change="estimatedQuantity"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </re-col>

    <el-form-item label="起始知识库id" prop="start_id">
      <el-input-number
        v-model="newFormInline.start_id"
        clearable
        min="1"
        @change="estimatedQuantity"
      />
    </el-form-item>
    <el-form-item label="生成数量" prop="number">
      <el-input-number
        v-model="newFormInline.number"
        clearable
        min="1"
        @change="estimatedQuantity"
      />
    </el-form-item>
    <el-form-item label="立即执行" prop="execute">
      <el-switch
        v-model="newFormInline.execute"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>
    <el-form-item
      v-if="newFormInline.execute == 0"
      label="执行时间"
      prop="hour"
    >
      <el-time-select
        v-model="newFormInline.hour"
        step="01:00"
        start="00:00"
        end="23:00"
        placeholder="选择时间"
      />
    </el-form-item>
    <el-form-item label="满足条件数量" prop="estimate_number">
      <el-input v-model="newFormInline.estimate_number" disabled clearable />
    </el-form-item>
  </el-form>
</template>

<style scoped>
:deep(.el-slider__runway) {
  background-color: #e9ecef;
}
:deep(.el-slider__bar) {
  background-color: #409eff;
}
:deep(.el-slider__stop) {
  background-color: #e9ecef;
}
</style>
